<template>
	<view>
		<z-paging-swiper>
			<view slot="top">
				<view class="bg-white u-p-r-28">
					<view>
						<u-tabs-swiper active-color="#FFCF0B" ref="uTabs" :list="publishCategoryList" :current="current"
							@change="tabsChange" :is-scroll="false"></u-tabs-swiper>
					</view>
				</view>
			</view>
			<!-- 滑动区域 -->
			<swiper style="height: 100%;" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item v-for="(item,index) in publishCategoryList" :key="index">
					<no-data v-if="dataList[index].length === 0" customClass="bg-f5"></no-data>
					<view class="content">
						<z-paging @onRefresh="onRefresh" :hide-empty-view="true" auto-show-back-to-top ref="paging"
							@query="queryList" :fixed="false" :auto="false" style="height: 100%;"
							loading-more-no-more-text="暂无更多">
							<view>
								<view class="u-p-l-28 u-p-r-28" v-for="(item,idx) in dataList[index]" :key="idx">
									<publish-card :item="item" @refresh="refresh" :type="type"></publish-card>
								</view>
							</view>
						</z-paging>
					</view>
					<!-- 
					<publish-swiper-item :tabIndex="index" :currentIndex="swiperCurrent">
					</publish-swiper-item> -->
				</swiper-item>
			</swiper>
		</z-paging-swiper>
	</view>
</template>

<script>
	import {
		myPublish
	} from '@/api/user';
	import {
		publishCategoryList
	} from '@/const'
	import publishSwiperItem from '@/pagesMy/components/publishSwiperItem/publishSwiperItem.vue'
	import publishCard from '@/pagesMy/components/publishCard/publishCard.vue'
	import noData from '@/components/noData/noData.vue'
	export default {
		components: {
			publishSwiperItem,
			publishCard,
			noData
		},
		data() {
			return {
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				publishCategoryList,
				type: 'adopt',
				dataList: [],
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			onRefresh() {
				this.$set(this.dataList, this.swiperCurrent, []);
			},
			refresh(){
				this.dataList = [];
				this.init();
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.type = publishCategoryList[this.swiperCurrent].id;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.type = publishCategoryList[this.swiperCurrent].id;
			},
			async queryList(page, pageSize) {
				const postData = Object.assign({}, {
					page,
					pageSize,
					type: this.type,
				})
				const res = await myPublish(postData);
				const newData = res.data.list;
				this.$refs.paging[this.swiperCurrent].complete(newData);
				const oldData = this.dataList[this.swiperCurrent];
				this.$set(this.dataList, this.swiperCurrent, oldData.concat(newData));
			},
			async init() {
				const postData1 = {
					page: 1,
					pageSize: 10,
					type: 'adopt',
				}

				const postData2 = {
					page: 1,
					pageSize: 10,
					type: 'find_pet',
				}

				const postData3 = {
					page: 1,
					pageSize: 10,
					type: 'find_master',
				}
				const res1 = await myPublish(postData1);
				const res2 = await myPublish(postData2);
				const res3 = await myPublish(postData3);
				this.dataList = [
					res1.data.list,
					res2.data.list,
					res3.data.list,
				]
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}
</style>
